<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<!-- import CSS -->
		<link
			href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.0/theme-chalk/index.min.css"
			type="text/css"
			rel="stylesheet"
		/>
	</head>

	<body>
		<div id="app">
			<template>
				<div>
					<el-card class="box-card">
						<div slot="header" class="clearfix">今天是 {{day}}</div>
						<div>
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<el-tag type="warning">待办</el-tag>
								</div>
								<div>
									<div v-for="(item,key) in tableData" class="item">
										<el-checkbox @change="finish(item.id)" :checked="false"
											>&nbsp; </el-checkbox>{{key+1}}、{{item.content}}
									</div>
									<div>
										<el-input
											type="textarea"
											v-model="inputData"
											placeholder=""
											size="normal"
											clearable
										></el-input>
										<el-button @click="save" type="primary" size="mini">保存</el-button>
									</div>
								</div>
							</el-card>
							<div style="height: 10px"></div>
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<el-tag type="success">完成</el-tag>
								</div>
								<div>
									<div v-for="(item,key) in finishData" class="item">
										{{key + 1}} 、{{item.content}}
									</div>
								</div>
							</el-card>
						</div>
					</el-card>
					<div style="height: 10px"></div>
				</div>
			</template>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script
		src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.12/vue.min.js"
		type="application/javascript"
	></script>
	<!-- import JavaScript -->
	<script
		src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.0/index.min.js"
		type="application/javascript"
	></script>
	<script src="js/dao.js"></script>
	<script>
		var Main = {
			data() {
				return {
					tableData: [],
					finishData: [],
					inputData: '',
					db: {},
					day: '',
					day_id: 0,
				}
			},
			mounted() {
				this.db = new DAO('./data.db')
				this.initDay()
				let self = this
				setTimeout(() => {
					self.init()
				}, 500)
			},
			methods: {
				initDay: function () {
					let now = new Date()
					let day =
						now.getFullYear() +
						' 年 ' +
						(now.getMonth() + 1) +
						' 月 ' +
						now.getDate() +
						' 日'
					this.day = day
					this.db.find('day', "day = '" + day + "'").then((row) => {
						if (!row) {
							this.db
								.insert('day', {
									day,
								})
								.then((row) => {
									this.day_id = row['id']
								})
						} else {
							this.day_id = row['id']
						}
					})
				},
				save: function () {
					if (!this.inputData) {
						this.$message.error("请填写内容")
						return;
					}
					let now = new Date()
					let day = this.day
					this.db.find('day', "day = '" + day + "'").then((row) => {
						if (row) {
							this.db
								.insert('note', {
									day_id: row.id,
									content: this.inputData,
								})
								.then(() => {
									this.init()
								})
						}
					})
				},
				init: function () {
					this.inputData = ''
					this.db
						.select('note', 'finish = 1')
						.then((res) => {
							this.tableData = res
						})
					this.db
						.select('note', 'finish = 2 AND finish_day_id = ' + this.day_id)
						.then((res) => {
							this.finishData = res
						})
				},
				finish: function (id) {
					let self = this
					this.db
						.update(
							'note',
							{
								finish: 2,
								finish_day_id: this.day_id,
							},
							'id = ' + id
						)
						.then(() => {
							setTimeout(() => {
								// self.init()
								location.href = location.href
							}, 1000)
						})
				},
			},
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>
	<style>
		.text {
			font-size: 14px;
		}

		.box-card .item {
			width: 500px;
			margin-bottom: 18px;
			line-height: 25px;
		}

		.clearfix:before,
		.clearfix:after {
			display: table;
			content: '';
		}
		.clearfix:after {
			clear: both;
		}
	</style>
</html>
